import React from 'react';
// loading组件，为了优化用户体验
import { Spin } from 'antd';
import styled from 'styled-components';
import Pts from 'prop-types'
const Loading = (props) => {
	return (
		<Main>
			<Spin size="large" spinning={props.spinning} tip={props.tip} />
		</Main>
	);
}

// 二次封装ui组件库提供的组件 需要思考的点？
// 01：给该组件设置一些默认的属性，可以接受父传子的属性，来修改这些默认属性
Loading.defaultProps = {
	spinning:true,
	tip:'加载中'
}

// 02：对参数类型进行校验
Loading.propTypes = {
	spinning:Pts.bool,
	tip:Pts.string
}


// 使用cssinjs技术
const Main = styled.div`
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
`

export default Loading;
